<template>
    <el-card style="max-width: 480px" class="card_login">
        <h1>登录</h1>
        <!-- 注意属性：ref绑定el-form对象，rules绑定验证规则对象，model绑定表单对象 -->
        <el-form ref="loginForm"
                 label-width="100px"
                 :rules="rules"
                 :model="formBean"
                 :size="large"
                 style="max-width: 600px">
            <el-form-item label="用户名：" prop="userName">
                <el-input v-model="formBean.userName" clearable/>
            </el-form-item>
            <el-form-item label="密码：" prop="password">
                <el-input v-model="formBean.password" type="password" show-password/>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="submitForm(loginForm)">登录</el-button>
                <el-button>清空</el-button>
            </el-form-item>
        </el-form>
    </el-card>
</template>

<script lang="ts" setup>
    import {reactive, ref} from "vue";
    import {ElMessage} from 'element-plus'
    import axios from '@/api/index.js'
    // import axios from 'axios'
    import {useRouter} from "vue-router"
    import type {FormInstance, FormRules} from 'element-plus'
    import {formatDate} from "../common/util";

    interface FormUser {
        userName: String,
        password: String,
        isLocked: String,
        createTime: String
    }

    //定义表单对象，使用FormInstance接口约束
    const loginForm = ref<FormInstance>();

    //定义跳转对象
    const router = useRouter();



    //封装表单元素对象，绑定model属性，axios提交用。使用自定义FormUser约束。
    const formBean = reactive<FormUser>({
        userName: "david",
        password: "123",
        isLocked: "0",
        createTime: formatDate(new Date())
    })


    //封装表单验证规则，可以自定义... 使用FormRules接口并嵌入自定义FormUser约束。
    const rules = reactive<FormRules<FormUser>>({
        userName: [
            {required: true, message: '用户名不能为空！', trigger: 'blur'},
            {pattern: /^\w{5,10}$/, message: '格式不正确！', trigger: 'blur'},
        ],
        password: [
            {required: true, message: '密码不能为空！', trigger: 'blur'}
        ]
    })

    //提交表单，为FormInstance接口约束类型。
    const submitForm = async (formName: FormInstance | undefined) => {
        if (!formName) return
        //表单验证，valid = true 提交。
        await formName.validate((valid, fields) => {
            if (valid) {
                //Ajax操作
                axios.post("/user/login", formBean)
                    .then(response => {
                        //处理返回数据，返回值数据为空则登录失败，有数据登录成功
                        if (response.data.code == 200) {
                            ElMessage.success('登录成功！')
                            //token存入session
                            sessionStorage.setItem("token",response.data.data)
                            //登录成功，页面跳转到main.vue
                            router.push("/index")
                        } else {
                            ElMessage.error(response.data.message)
                        }
                    })
            } else {
                console.log('error submit!', fields)
            }
        })
    }


</script>

<style scoped>
    .card_login {
        margin: 200px auto;
    }

    h1 {
        text-align: center;
        padding: 20px 0;
    }
</style>
